<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Mixer</title>

		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="174x174"
			href="./favicon.png"
		/>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
		<link
			href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
			rel="stylesheet"
		/>
		<script src="../build/Tone.js"></script>
		<script src="./js/tone-ui.js"></script>
		<script src="./js/components.js"></script>
		<style type="text/css">
			#tracks {
				display: flex;
			}
			#tracks tone-channel {
				flex-grow: 1;
				margin: 5px;
				width: 20%;
			}
		</style>
	</head>
	<body>
		<tone-example label="Channel">
			<div slot="explanation">
				<a href="https://tonejs.github.io/docs/latest/classes/Channel"
					>Tone.Channel</a
				>
				provides a simple channel interface. It allows for panning and
				volume changes as well as the ability to
				<a href="https://tonejs.github.io/docs/latest/classes/Solo"
					>solo</a
				>
				(exclude audio in other Tone.Channels).
			</div>

			<tone-loader></tone-loader>
			<div id="content">
				<tone-play-toggle></tone-play-toggle>
			</div>
		</tone-example>

		<script type="text/javascript">
			function makeChannel(name, url, pan) {
				const channel = new Tone.Channel({
					pan,
				}).toDestination();
				const player = new Tone.Player({
					url: `https://tonejs.github.io/audio/berklee/${url}.mp3`,
					loop: true,
				})
					.sync()
					.start(0);
				player.connect(channel);

				// add a UI element
				ui({
					name,
					tone: channel,
					parent: document.querySelector("#content"),
				});
			}

			// create a meter on the destination node
			const toneMeter = new Tone.Meter({ channelCount: 2 });
			Tone.Destination.chain(toneMeter);
			meter({
				tone: toneMeter,
				parent: document.querySelector("#content"),
			});

			makeChannel("Guitar 0", "comping1", 1);
			makeChannel("Guitar 1", "comping2", -1);
			makeChannel("Guitar 2", "comping3", 0.25);
			makeChannel("Guitar 3", "comping4", -0.25);

			document
				.querySelector("tone-play-toggle")
				.addEventListener("start", () => Tone.Transport.start());
			document
				.querySelector("tone-play-toggle")
				.addEventListener("stop", () => Tone.Transport.stop());
		</script>
	</body>
</html>
